<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>

		<div id="">
			<!-- 焦点事件：onfocus 获取, onblur 失去 -->
			<!-- 鼠标事件：onmousedown onmouseup onmouseover onmouseout onmousemove -->
			<!-- 点击事件：onclik ondblclick -->
			<!-- dbl:double -->
			<!-- 键盘事件：onkeypress onkeydown onkeyup -->
			<!-- 文本：onchange -->
			<!-- 加载：onload onerrer -->
			<textarea rows="20" cols="80" autofocus="autofocus"></textarea>
			<br>
			<iframe src="../form/option.html" width="" height=""></iframe>
			<iframe src="../form/option2.html" width="" height=""></iframe>
			<br>
			<button type="button" onclick="alert('你，来啊，');">来啊，你点我啊。</button>
			<br>
			<button id="mybtn" type="button">点你咋地</button>
		</div>

		<script type="text/javascript">
			// 分为2类：

			// 5.40
			// 1. Event Handler 事件处理程序
			// 1.1 通过事件处理程序内容属性：onxxx="javascript code"。
			// 例如,单击事件click，对应的内容属性可以是onclick="alert(...);"
			// 1.2 通过事件处理程序的idl方式
			var mybtn = document.getElementById('mybtn');

			function doClickYou() {
				alert('别动。。。');
			}
			mybtn.onclick = doClickYou;
			mybtn.onclick = function() {
				alert('你再动一下，试试');
			};

			// P5.46
			// 2. Event Listener 事件监听器（事件侦听器）
			// element.addEventListener(type, listener[, useCapture]);
			// type: event, eg.'click'
			// listener: function(event)
			// useCapture: 是否在捕获阶段处理事件。3阶段：捕获阶段、目标阶段、冒泡阶段。
			// 检验事件阶段，应该在父子元素嵌套情况下来验证。
			// 如果只有一个元素，它和普通的事件处理程序没什么大的去吧；
			// 唯一的区别是：事件按监听器，可以配置多个。
			function doClick2() {
				alert('你这么喜欢点击我，肯定是喜欢我啦，奥，真不意思呀。');
			}
			mybtn.addEventListener('click', doClick2, false);
			mybtn.addEventListener('click', function() {
				alert('喜欢就好啦，太不好意思啦。。。');
			}, false);
		</script>

	</body>
</html>
